<template>
  <div class="p-15">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="pAll">
      <el-breadcrumb-item><span @click="goBack()">云资源</span></el-breadcrumb-item>
      <el-breadcrumb-item>{{ namer }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索条件 -->
    <el-form :model="ruleForm" ref="ruleForm" label-width="80" :inline="true">
      <el-form-item>
        <el-radio-group class="noBg" v-model="ruleForm.radio" border size="medium" @change="submitForm">
          <!-- 最近一个小时 -->
          <el-radio-button label="realTime">实时</el-radio-button>
          <el-radio-button label="nearlyHours">近24小时</el-radio-button>
          <el-radio-button label="nearlyDays">近7天</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="times">
        <el-date-picker
          v-model="ruleForm.times"
          type="datetimerange"
          :picker-options="pickerBeginDateBefore"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          :width="260"
          @change="changeData"
          :clearable="false"
        ></el-date-picker>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" class="btnSizeStyle" @click="submitForm()">查询</el-button>
      </el-form-item> -->
    </el-form>
    <!-- 内容 -->
    <div class="content">
      <el-radio-group class="yesBg" v-model="contentRadio" @change="radioChange">
        <el-radio-button label="cpuPage">CPU</el-radio-button>
        <el-radio-button label="memory">内存</el-radio-button>
        <el-radio-button label="networkFlow">网络</el-radio-button>
        <el-radio-button label="hardDisk">硬盘</el-radio-button>
      </el-radio-group>
      <!-- cpu/内存/网络/硬盘 -->
      <cpu-page v-if="contentRadio === 'cpuPage'" :childData="detailsData" @childByValue="childByValue"></cpu-page>
      <memory v-if="contentRadio === 'memory'" :childData="detailsData" @childByValue="childByValue"></memory>
      <network-flow v-if="contentRadio === 'networkFlow'" :childData="detailsData" @childByValue="childByValue"></network-flow>
      <hard-disk v-if="contentRadio === 'hardDisk'" :childData="detailsData" @childByValue="childByValue"></hard-disk>
    </div>
  </div>
</template>
<script>
import { zhonHe } from '@/utils/allUrl'
// import { timestampToTime } from '@/assets/js/setTime' // timeLoad
import cpuPage from '@/components/Comprehensive/monitor/components/cpuPage' // cpu
import memory from '@/components/Comprehensive/monitor/components/memory' // 内存
import networkFlow from '@/components/Comprehensive/monitor/components/networkFlow' // 网络
import hardDisk from '@/components/Comprehensive/monitor/components/hardDisk' // 硬盘
export default {
  data() {
    return {
      namer: '',
      P_ruleForm: {},
      ruleForm: {
        radio: 'realTime',
        times: '',
      },
      contentRadio: 'cpuPage', // 默认cpu
      detailsData: {
        startDate: '', // 开始日期、(yyyy-MM-dd HH:mm:ss)
        endDate: '', // 结束日期、(yyyy-MM-dd HH:mm:ss)
        type: '', // 判断是否手动改变时间了  change 改变了
      },
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      timeVal: null,
    }
  },
  components: { cpuPage, memory, networkFlow, hardDisk },
  computed: {},
  created() {
    this.namer = this.$route.query.name
    const end = new Date()
    // 获取实时(默认一个小时)
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 1)
    this.detailsData = {
      startDate: this.getTime(start), // 开始日期、(yyyy-MM-dd HH:mm:ss)
      endDate: this.getTime(end), // 结束日期、(yyyy-MM-dd HH:mm:ss)
      type: '', // 判断是否手动改变时间了  change 改变了
    }
    this.ruleForm.times = [this.detailsData.startDate, this.detailsData.endDate]
    this.timeVal = setInterval(() => {
      this.initList()
    }, 30 * 1000)
  },
  mounted() {},
  methods: {
    // 子组件调用父组件的事件
    childByValue(childValue) {
      // console.log('-----', childValue)
      this.ruleForm.times = [childValue.startDate, childValue.endDate]
      this.detailsData = childValue
    },
    // 列表查询
    async initList() {
      const params = new URLSearchParams()
      params.append('ZCLX_XJ', 2)
      const { data: res } = await this.$http.post(`${zhonHe}milieu/findSnmp`, params)
      console.log(res)
    },
    // 返回上一页
    goBack() {
      console.log(this.$route.query.searchText)
      this.$router.push({
        name: 'serverOverview',
        params: {
          searchText: this.$route.query.searchText,
          selectedIndex: this.$route.query.selectedIndex,
        },
      })
    },
    // radio change事件
    radioChange(val) {
      if (this.detailsData.type === 'change') {
        clearInterval(this.timeVal) // 清除定时器
      }
    },
    // 查询
    submitForm(type) {
      // console.log(type)
      const end = new Date()
      var start = new Date()
      switch (type) {
        case 'realTime': // 实时
          start.setTime(start.getTime() - 3600 * 1000 * 1)
          break
        case 'nearlyHours': // 近24小时
          // // 近24小时
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
          break
        case 'nearlyDays': // 近7天
          // // 近七天
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          break
      }
      this.detailsData = {
        startDate: this.getTime(start), // 开始日期、(yyyy-MM-dd HH:mm:ss)
        endDate: this.getTime(end), // 结束日期、(yyyy-MM-dd HH:mm:ss)
        type: 'change', // 判断是否手动改变时间了  change 改变了
      }
      // 改变时间选择器中的时间
      this.ruleForm.times = [this.detailsData.startDate, this.detailsData.endDate]
      clearInterval(this.timeVal) // 清除定时器
    },
    // 日期改变
    changeData(val) {
      this.detailsData = {
        startDate: val[0], // 开始日期、(yyyy-MM-dd HH:mm:ss)
        endDate: val[1], // 结束日期、(yyyy-MM-dd HH:mm:ss)
        type: 'change', // 判断是否手动改变时间了  change 改变了
      }
      clearInterval(this.timeVal) // 清除定时器
    },
    // 格式化时间
    getTime(date) {
      const Y = date.getFullYear()
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
      var m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
      var s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s // yyyy-MM-dd HH:mm:ss
    },
  },
  destroyed() {
    if (this.timeVal) {
      clearInterval(this.timeVal)
    }
  },
}
</script>

<style lang="scss" scoped>
.el-breadcrumb.pAll {
  border-bottom: 0;
  padding-left: 0 !important;
}
.el-radio-group {
  &.noBg {
    width: 225px;
    .el-radio-button {
      width: calc(100% / 3);
    }
  }
  &.yesBg {
    width: 400px;
    margin-bottom: 2px;
    .el-radio-button {
      width: calc(100% / 4);
      height: 40px;
      line-height: 40px;
    }
  }
}
// 设置有背景el-radio-group的高度
::v-deep .yesBg {
  .el-radio-button {
    .el-radio-button__inner {
      height: 40px;
      line-height: 40px;
    }
  }
}
::v-deep .noBg {
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #3698fa;
    background-color: #fff;
    border-color: #1989fa;
    -webkit-box-shadow: -1px 0 0 0 #409eff;
    box-shadow: -1px 0 0 0 #409eff;
  }
}
// 去除el-radio-group第一个和最后一个圆角
::v-deep .el-radio-group {
  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 0;
  }
  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
  }
}
.el-form-item {
  margin-bottom: 10px;
}
</style>
